<script setup>
import { reactive, ref, watch } from 'vue';
const is_show_password = ref(false);
import { RecaptchaV2 } from "vue3-recaptcha-v2";
import {check_google_token, check_input} from "@/api/google"
import {useRouter} from "vue-router";   
import {username_rules,password_rules} from "../js/rules"
import { ElMessage } from 'element-plus';
import {userStore} from "@/store/user"
import {user_login} from "@/api/operator"
const input_type = ref("password");
const show_verification = ref(false);
const verification_result = ref();
const user_form = ref();
const store = userStore();
const user_information = ref({
    username:'',
    password:''
})
watch(()=> is_show_password.value,(newval,oldval)=>{
    if(newval == true){
        input_type.value = "text"
        return;
    }
    input_type.value = "password";
})
const router = useRouter();
//--检验规则--
const user_information_rules = reactive ({
    username:[
    {required:true,message:'请输入用户名',trigger:'blur'},
    {validator:username_rules,trigger:'blur'}
    ],
    password:[
    {required:true,message:'请输入密码',trigger:'blur'},
    {validator:password_rules,trigger:'blur'}
    ]
})
//--检验规则--
//--表单校验--
const form_check = () => {
    user_form.value.validate( async (valid)=>{
        if(valid) {
            //等待校验结果
            let response = await user_login(user_information.value);
            console.log(response.result);
            //校验结果失败，输出消息并返回 
            if (response.result == null) {
                ElMessage.error({
                    message:"用户名或密码输入错误",
                    duration:1000
                })
                return;
            }
            //持久化存储
            store.save_user_info(response.result)


                    //路由转发         
                    setTimeout(()=>{
                        router.push({
                            path:"/service"
                        })
                    },1500)

                    ElMessage.success({
                        message:"正在跳转,请稍等···",
                        duration:1000
                    })

        }
    })
}
const submit_user_information = () => {
    form_check();
}
//--表单校验--
//--google验证码操作--
const handleWidgetId = (widgetId) => {
    console.log("Widget ID: ", widgetId);
};
const handleErrorCalback = () => {
    console.log("Error callback");
};
const handleExpiredCallback = () => {
    console.log("Expired callback");
};
const handleLoadCallback = async (response) => {
    let server_response = await check_google_token({"token":response});
    console.log(server_response);
    if(server_response.data.success == true){
        verification_result.value = true;
    }
};
//--google验证码操作--
</script>
<template>
    <div class="shadow-xl shadow-gray-500 ring-2 ring-grey-500 ring-offset-2 ring-offset-gray-400 rounded-lg">
        <el-form @keyup.enter="submit_user_information" class="form" ref="user_form" :model="user_information" :rules="user_information_rules">
        <div class="flex-column">
            <label>账号 </label></div>
            <div class="inputForm">
            <svg height="20" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg"><g id="Layer_3" data-name="Layer 3"><path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path></g></svg>
            <el-form-item prop="username">
            <input v-model="user_information.username"  type="text" class="input" placeholder="请输入账号">
        </el-form-item>
        </div>
        
        <div class="flex-column">
            <label>密码 </label></div>
            <div class="inputForm">
            <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>        
            <el-form-item prop="password">
            <input :type="input_type" v-model="user_information.password"   class="input" placeholder="请输入密码">
            </el-form-item>

            <svg @click="is_show_password = !is_show_password" style="margin-right:20px;cursor: pointer;" viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"></path></svg>
            </div>
        <div class="flex-row">
            <!-- <div>
            <input type="checkbox">
            <label>Remember me </label>
            </div> -->
            <!-- <span class="span">Forgot password?</span> -->
        </div>
        <button type="button" @click="submit_user_information"  class=" button-submit shadow-md ring-2 ring-gray-700 hover:bg-blue-500 hover:shadow-xl transition-all duration-500">登录</button>
        <p class="p">如果您还没有账号，请向本市公安局申领
            <!-- <span class="span">Sign Up</span>  -->
        </p>
    <div class="flex  justify-center">
    <!-- <RecaptchaV2
            v-show="show_verification"
            @widget-id="handleWidgetId"
            @error-callback="handleErrorCalback"
            @expired-callback="handleExpiredCallback"
            @load-callback="handleLoadCallback"
        /> -->
    </div>
</el-form>
    </div>
</template>
<style scoped>
@import url(../css/login_card.css);
.el-form-item {
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
}
.el-form{
}
</style>